<template>
	<div class="bg-white">
		<t-form :data="formData" labelAlign="top" :rules="rules" @reset="onReset" @submit="onSubmit" ref="loginFormRef">
			<div class="p-8">
				<t-button theme="default" @click="black">返回详情</t-button>
				<p class="text-lg mb-2 mt-4">项目详情</p>
				<div class="flex">
					<div class="w-60">
						<t-form-item name="project_name" label="项目名称" class="w-full">
							<t-input v-model="formData.project_name" placeholder="请输入项目名称"></t-input>
						</t-form-item>
					</div>
					<div class="ml-4 w-60">
						<t-form-item name="project_start_date" label="启动日期" class="w-full">
							<t-date-picker v-model="formData.project_start_date" placeholder="请选择项目启动日期" class="w-full"></t-date-picker>
						</t-form-item>
					</div>
				</div>
				<div class="flex mt-4">
					<div class="w-60">
						<t-form-item name="project_first_date" label="初稿日期" class="w-full">
							<t-date-picker 
							v-model="formData.project_first_date" 
							placeholder="请选择项目启动日期" 
							class="w-full"
							:disable-date="{ before: formData.project_start_date }"
							></t-date-picker>
						</t-form-item>
					</div>
					<div class="ml-4 w-60">
						<t-form-item name="project_end_date" label="预计完成日期" class="w-full">
							<t-date-picker 
							v-model="formData.project_end_date" 
							placeholder="请选择项目启动日期" 
							class="w-full"
							:disable-date="{ before: formData.project_first_date }"
							:disabled="!formData.project_first_date"
							></t-date-picker>
						</t-form-item>
					</div>
				</div>
				<div class="mt-4">
					<t-form-item label="项目类别" name="project_type">
						<t-radio-group v-model="formData.project_type">
							<t-radio :value="0">公司项目</t-radio>
							<t-radio :value="1">客户项目</t-radio>
						</t-radio-group>
					</t-form-item>
				</div>
				<div class="mt-4" style="width: 31rem;">
					<t-form-item label="项目简介" name="project_body">
						<t-textarea v-model="formData.project_body" placeholder="请输入项目简介"></t-textarea>
					</t-form-item>
				</div>
			</div>
			<t-divider></t-divider>
			<div class="p-8">
				<p class="text-lg mb-2">人员配置</p>
				<div class="flex">
					<div class="w-60">
						<t-form-item label="项目客服" name="project_service">
							<t-select v-model="formData.project_service" placeholder="请选择项目客服" :options="options"></t-select>
						</t-form-item>
					</div>
					<div class="ml-4 w-60">
						<t-form-item label="项目组长" name="project_leader">
							<t-select v-model="formData.project_leader" placeholder="请选择项目客服" :options="options"></t-select>
						</t-form-item>
					</div>
				</div>
				<div class="mt-4" style="width: 31rem">
					<t-form-item label="项目成员" name="project_groups">
						<t-select v-model="formData.project_groups" placeholder="请选择项目客服" :options="options" multiple></t-select>
					</t-form-item>
				</div>
				<div class="flex mt-8 pb-16">
					<t-button theme="default" type="reset">重置</t-button>
					<t-button class="ml-4" type="submit">立即更新</t-button>
				</div>
			</div>
		</t-form>
	</div>
</template>

<script>
	import { getUserId } from '@/unit/auth'
	import dayjs from 'dayjs'
	
	var obj = new Object
	
	export default {
		name: 'UpdateProject',
		data() {
			return {
				formData: {
					project_id: this.$route.query.project_id,
					project_name: '',
					project_start_date: dayjs().format('YYYY-MM-DD'),
					project_first_date: '',
					project_end_date: '',
					project_type: '',
					project_body: '',
					project_service: '',
					project_leader: '',
					project_groups: [],
					project_creator_id: '',
					project_creator_date: ''
				},
				rules: {
					project_name: [{required: true, message: '项目名称必填', type: 'error'}],
					project_start_date: [{required: true, message: '启动日期必选', type: 'error'}],
					project_first_date: [{required: true, message: '初稿日期必选', type: 'error'}],
					project_end_date: [{required: true, message: '预计完成日期必选', type: 'error'}],
					project_type: [{required: true, message: '项目类别必选', type: 'error'}],
					project_body: [{required: true, message: '项目简介必填', type: 'error'}],
					project_service: [{required: true, message: '项目客服必选', type: 'error'}],
					project_leader: [{required: true, message: '项目组长必选', type: 'error'}],
					project_groups: [{required: true, message: '项目成员必选', type: 'error'}],
				},
				options: []
			}
		},
		methods: {
			// 获取项目详情
			getProjectBody(query){
				this.$store.dispatch('project/getProjectBody', query).then(res => {
					if(res.status == 0){
						this.formData.project_name = res.data[0][0].project_name
						this.formData.project_start_date = res.data[0][0].project_start_date
						this.formData.project_first_date = res.data[0][0].project_first_date
						this.formData.project_end_date = res.data[0][0].project_end_date
						this.formData.project_type = parseInt(res.data[0][0].project_type)
						this.formData.project_body = res.data[0][0].project_body
						this.formData.project_service = parseInt(res.data[0][0].project_service)
						this.formData.project_leader = parseInt(res.data[0][0].project_leader)
						this.formData.project_creator_id = parseInt(res.data[0][0].project_creator_id)
						this.formData.project_creator_date = res.data[0][0].project_creator_date
						for(let i = 0 ; i < res.data[0][0].project_groups.length ; i++){
							this.formData.project_groups.push(parseInt(res.data[0][0].project_groups[i].project_groups))
						}
						
					}
				})
			},
			// 返回
			black(){
				this.$router.push({
					name: 'ProjectInfo',
					query: {
						project_id: this.$route.query.project_id
					}
				})
			},
			// 获取人员列表
			getUserList(){
				this.$store.dispatch('user/getUserSelectList').then(res => {
					if(res.status === 0){
						this.options = res.data
						this.formData.project_service = parseInt(getUserId())
						this.$refs.loginFormRef.reset()
					}
				})
			},
			// 表单重置
			onReset(){
				const query = { project_id: this.$route.query.project_id }
				this.getProjectBody(query)
			},
			// 提交
			onSubmit({ validateResult, firstError }){
				if (validateResult === true) {
					obj = {...this.formData}
					let str = ''
					for(let i = 0 ; i < obj.project_groups.length ; i++){
						if(i === (obj.project_groups.length - 1)){
							str = str + obj.project_groups[i]
						} else {
							str = str + obj.project_groups[i] + '@'
						}
					}
					obj.project_groups = str
					this.$store.dispatch('project/updateProject', obj).then(res => {
						if(res.status === 0){
							this.$message.success(res.message)
						} else {
							this.$message.error(res.message)
						}
					})
				} else {
					this.$message.warning(firstError);
				}
			}
		},
		created() {
			this.getUserList()
		}
	}
</script>